import { photovolaticStatusesType } from '@/pages/OverView/photovoltaic/type';
import { useIntl } from '@umijs/max';
import React from 'react';
import Styles from './componentsStyles.less';

type labelType = {
  label: string;
  value: string;
};
type SumType = {
  title: string;
  dataIndex: string;
  valueList: labelType[];
};
type IProps = {
  photovolaticStatuses: photovolaticStatusesType;
};
const SumInfo: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { photovolaticStatuses } = props;
  const SumList: SumType[] = [
    {
      title: intl.formatMessage({ id: 'photovoltaic.storageCharge' }),
      dataIndex: 'storageCharge',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.storageDischarge' }),
      dataIndex: 'storageDischarge',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.genEnergy' }),
      dataIndex: 'powerGeneration',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.conEnergy' }),
      dataIndex: 'powerConsumption',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.onGrid' }),
      dataIndex: 'onGrid',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.offGrid' }),
      dataIndex: 'offGrid',
      valueList: [
        { label: intl.formatMessage({ id: 'global.day' }), value: 'day' },
        { label: intl.formatMessage({ id: 'global.month' }), value: 'month' },
        { label: intl.formatMessage({ id: 'global.year' }), value: 'year' },
      ],
    },
    {
      title: intl.formatMessage({ id: 'photovoltaic.environParams' }),
      dataIndex: 'environmentalParameters',
      valueList: [
        {
          label: intl.formatMessage({ id: 'photovoltaic.coal' }),
          value: 'tandardCoalConservation',
        },
        {
          label: intl.formatMessage({ id: 'photovoltaic.co2' }),
          value: 'carbonDioxideEmissionReduction',
        },
      ],
    },
  ];
  const initData: photovolaticStatusesType = {
    storageCharge: {
      day: '-',
      month: '-',
      year: '-',
    },
    storageDischarge: {
      day: '-',
      month: '-',
      year: '-',
    },
    powerGeneration: {
      day: '-',
      month: '-',
      year: '-',
    },
    powerConsumption: {
      day: '-',
      month: '-',
      year: '-',
    },
    onGrid: {
      day: '-',
      month: '-',
      year: '-',
    },
    offGrid: {
      day: '-',
      month: '-',
      year: '-',
    },
    environmentalParameters: {
      tandardCoalConservation: '-',
      carbonDioxideEmissionReduction: '-', // 假设单位为 t，可以换成其他单位
    },
  };
  return (
    <>
      <div className={Styles.sumInfo}>
        {SumList.map((item: SumType) => {
          return (
            <div key={item.dataIndex} className={Styles.sumInfoItem}>
              <div className={Styles.sumInfoItemTitle}>{item.title}</div>
              <div className={Styles.sumInfoItemList}>
                {item.valueList.map((label: labelType) => {
                  return (
                    <div key={label.label} className={Styles.sumInfoItemLabel}>
                      <span>{label.label}</span>
                      <span>{(photovolaticStatuses || initData)[item.dataIndex][label.value]}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default SumInfo;
